<template>
  <transition name="translate">
    <div class="card-wrap">
      <common-back :content="headerTitle"></common-back>
      <common-loading v-show="showLoading"></common-loading>
      <div class="card-content"
           v-show="!showLoading">
        <ul class="list">
          <li class="item"
              border-bottom-1px>
            <div class="title">本人真实姓名</div>
            <input type="text"
                   class="input"
                   placeholder="请输入姓名"
                   v-model="name">
          </li>
          <li class="item"
              border-bottom-1px>
            <div class="title">身份证号</div>
            <input type="text"
                   class="input"
                   placeholder="请输入身份证号"
                   v-model="idNumber">
          </li>
          <li class="item"
              border-bottom-1px>
            <div class="title">银行卡号</div>
            <input type="text"
                   class="input"
                   placeholder="请输入银行卡号"
                   v-model="cardNumber">
          </li>
          <li class="item"
              border-bottom-1px>
            <div class="title">银行预留手机号</div>
            <input type="text"
                   class="input"
                   placeholder="请输入银行预留手机号"
                   v-model="phone">
          </li>
        </ul>
      </div>
      <div class="hint">非本人银行卡，可能会导致借款失败</div>
      <common-button :content="buttonTitle"
                     @submit="handleSubmit"
                     class="card-btn"
                     v-show="!showLoading"></common-button>
    </div>
  </transition>
</template>
<script>
import CommonBack from 'common/headerBack/back'
import CommonButton from 'common/button/button'
import CommonLoading from 'common/loading/loading'
import { mapState, mapMutations } from 'vuex'
export default {
  name: 'card',
  components: {
    CommonBack,
    CommonButton,
    CommonLoading
  },
  created () {
    this.getState()
  },
  data () {
    return {
      headerTitle: '绑定银行卡',
      name: '',
      idNumber: '',
      cardNumber: '',
      phone: '',
      buttonTitle: '下一步',
      showLoading: true
    }
  },
  computed: {
    ...mapState(['person', 'contact'])
  },
  methods: {
    ...mapMutations({
      changeBankState: 'changeBankState'
    }),
    getState () {
      if (Number(this.person) === 1 && Number(this.contact) === 1) {
        this.getCard()
      } else {
        this.$router.push({
          path: '/borrow'
        })
      }
    },
    handleSubmit () {
      const flag = this.check()
      if (flag) {
        this.postCard()
      }
    },
    postCard () {
      this.$api.borrow.authenticationCard({
        real_name: this.name,
        idcard_no: this.idNumber,
        bank_no: this.cardNumber,
        obligate_mobile: this.phone
      })
        .then(this.postCardSucc)
        .catch((e) => {
          this.$toast('网络异常请稍后再试')
        })
    },
    postCardSucc (res) {
      res = res.data
      if (res.code === this.$api.CODE_OK) {
        this.$toast.success(res.msg)
        const bank = 1
        this.changeBankState(bank)
        this.$localStorage.set('bank', bank)
        this.$router.push({
          path: '/borrow/attestationNow'
        })
      } else if (res.code === this.$api.CODE_ERROR) {
        this.$toast.fail({
          duration: 1000,
          message: res.msg
        })
      }
    },
    getCard () {
      this.$api.borrow.getCard()
        .then(this.getCardSucc)
        .catch((e) => {
          this.$toast('网络异常请稍后再试')
        })
    },
    getCardSucc (res) {
      res = res.data
      if (res.code === this.$api.CODE_OK && res.data) {
        this.showLoading = false
        const data = res.data
        if (data.bank != null) {
          this.name = data.bank.real_name
          this.idNumber = data.bank.idcard_no
          this.cardNumber = data.bank.bank_no
          this.phone = data.bank.obligate_mobile
        }
      }
    },
    check () {
      const phoneReg = /^1[3456789]\d{9}/
      const cardReg = /^([1-9]{1})(\d{14}|\d{18})$/
      const id = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/
      if (this.name === '') {
        this.$toast({
          duration: 1000,
          message: '姓名不能为空'
        })
        return false
      }
      if (!id.test(this.idNumber)) {
        this.$toast({
          duration: 1000,
          message: '身份证格式不正确'
        })
        return false
      }
      if (!cardReg.test(this.cardNumber)) {
        this.$toast({
          duration: 1000,
          message: '银行卡格式不正确'
        })
        return false
      }
      if (!phoneReg.test(this.phone)) {
        this.$toast({
          duration: 1000,
          message: '手机号格式不正确'
        })
        return false
      }
      return true
    }
  }
}
</script>
<style lang="stylus" scoped>
@import '~stylus/mixins.styl'
@import '~stylus/variable.styl'

.card-wrap
  position absolute
  top 0
  left 0
  bottom 0
  right 0
  background-color $common_bgc_gray
  z-index 20
  overflow-y scroll
  padding()
  padding-top 108px

  .card-content
    width 100%
    background $common_bgc
    box-shadow 0px 6px 12px 0px rgba(47, 53, 66, 0.16)
    border-radius 24px
    padding-left 30px
    padding-right 30px
    box-sizing border-box
    margin-bottom 30px

    .list
      width 100%

      .item
        height 110px
        display flex
        justify-content space-between
        align-items center

        .title, .input
          font-size $shop_name
          font-weight 400
          color $id_input

        .title
          width 230px

        .input
          height 100%
          border none
          background-color $common_bgc
          flex 1
          padding-left 10px
          padding-right 10px
          box-sizing border-box
          text-align right

  .hint
    font-size $address
    font-weight 400
    color #57606F

  .card-btn
    position absolute
    bottom 88px
    left 50%
    transform translateX(-50%)
    padding()

.translate-enter-active, .translate-leave-active
  transition all 0.3s

.translate-enter, .translate-leave-active
  transform translate3d(100%, 0, 0)
</style>
